Vue.js Vuetifyコンポーネントの見た目をカスタマイズするいろは
Vuetifyの見た目をカスタマイズする方法は3つほどある。
①Vuetifyが用意してるプロパティに与える値を変える
②Vuetifyが用意してるsass変数の値を変える
③Vueコンポーネントに直接cssを当てる
方法の優先順位としては①②③の順になる。
③は最終奥義って感じ。できれば使いたくない。
①Vuetifyが用意してるプロパティに与える値を変える
こいつにはPropsというvueやreactでお馴染みの引数のようなものが設定されてる。
この用意されてる引数にデータを入れていくのがいい。
例えばheight（プログレスバーの高さ）、color（バーの色）などがある。
以下のような感じでコンポーネントを作ればOK
code: sample.js
<v-progress-linear height={10}></v-progress-bar>
②Vuetifyが用意してるsass変数の値を変える
propsと同じようにSASS変数というのが用意されてる。
その値を変えてあげると、コンポーネントの見た目も変わる。
例えば、プログレスバーの角を丸くしたい場合は$progress-linear-border-radiusの値を変えるとできる。
③Vueコンポーネントに直接cssを当てる
上の①でも②でも求めるコンポーネントの見た目にならない時...
その時は仕方ないのでコンポーネントに直接cssを当てるしかない。
例えば、プログレスバーの$progress-linear-border-radiusは外側の角しか丸にできない。
中身は丸にできないのでどうしようか...となる。
そういう時は以下のようにコードを当てる。
code: sample.vue
<template>
<v-progress-linear height="10" :value="value" :class="app-progress-bar" />
</template>
<script lang="ts">
...
</script>
<style lang="scss">
.v-progress-linear.app-progress-bar {
& > .v-progress-linear__determinate {
border-radius: 10px;
}
& > .v-progress-linear__buffer {
background-color: 10px;
}
}
</style>
ポイント
1.iconVuetifyのコンポーネントのルートclassは全てそのコンポーネントの名前になる
ex）v-progress-linearなら、.v-progress-linear
2.icon全てのv-progress-linearにcssの影響が及ばないように、クラス名をつけてあげて、その中でcssの定義をする
ex）.v-progress-linear.app-progress-bar
3.iconどういうclassが定義されてるのかは、githubを直接参照して調べるしかない
.sassと.tsを確認しとけばなんとかなる。
4.icon!importantを使わないと見た目が変化しないことがある。
優先順位を変えないと変わらないことが多々ある。